@import "./common/base";

html, body, #app, .container, .result {
  height: 100%;
}

.container {
  background-color: #F0F2F5;
}

.section {
  > p {
    line-height: .66rem;
    padding-left: .2rem;
    font-size: .24rem;
    color: rgba(108, 110, 112, 1);
  }
  .sec-con {
    background-color: #fff;
    textarea {
      width: 100%;
      border: none;
    }
  }
}

.sec-con-concat {
  > p {
    display: flex;
    align-items: center;
    height: .88rem;
    span {
      padding-left: .2rem;
      flex-shrink: 0;
    }
    input {
      flex-grow: 1;
      border: none;
    }
  }
}

.mobile-err {
  font-size: .26rem;
  color: rgba(209, 51, 28, 1);
  line-height: 32px;
  padding-right: .2rem;
}

.both {
  height: .1rem;
}

.upload {
  background-color: #fff;
  padding-left: .3rem;
  padding-bottom: 1rem;
  > p {
    font-size: .26rem;
    color: rgba(155, 155, 155, 1);
    line-height: .7rem;
  }
}

.up-con {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 1.5rem;
    margin-right: .2rem;
    margin-bottom: .2rem;
    border: 1px dashed #EBECF0;
    max-height: 1.5rem;
    overflow: hidden;
    img {
      max-height: 100%;
    }
  }
  .up-img {
    position: relative;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 1.5rem;
    .del {
      width: .3rem;
      height: .3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: .1rem;
      top: .1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .up-btn {
    position: relative;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #EBECF0;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: .8rem;
    }
  }
}

.footer {
  background-color: #4A90E2;
  color: #fff;
  line-height: .88rem;
  height: .88rem;
  font-size: .3rem;
  text-align: center;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  a {
    color: #fff;
  }
}

.mint-radiolist-title {
  margin: 0 !important;
  padding: 0;
}

.mint-radio-label {
  margin-left: 0 !important;
}

.mint-radiolist-label {
  padding-left: 0 !important;
}

.mint-cell-wrapper {
  border-bottom: 1px solid #EBECF0;
}

.result {
  background-color: #fff;
  .con {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 1rem;
      margin-top: 1.4rem;
    }
    h3 {
      font-size: .34rem;
      color: rgba(50, 50, 50, 1);
      text-align: center;
      padding: .2rem 0;
    }
    p {
      font-size: .24rem;
      color: rgba(155, 155, 155, 1);
      line-height: .34rem;
      text-align: center;
      padding: 0 .5rem;
    }
  }
  .btn {
    width: 6rem;
    height: .8rem;
    background: rgba(74, 144, 226, 1);
    border-radius: .4rem;
    color: #fff;
    text-align: center;
    line-height: .8rem;
    margin: .4rem auto 0;
  }
}

.img-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 100%;
    height: auto;
  }
}